<template>
    <div style="margin: 0px auto">
        <h1>删改商品分类</h1>
        <template>
            <el-table
                    :data="form"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="form"
                        label="分类名称"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="form"
                        label="分类级别"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="ID"
                        label="分类ID"
                        width="120">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <!--具体操作-->
                        <el-button @click="dialogFormVisible=true" type="text" size="small">修改</el-button>
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index, form)"
                                type="text"
                                size="small">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="修改分类" :visible.sync="dialogFormVisible">
                <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="分类名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺名称" prop="region">
                        <el-input v-model="form"></el-input>
                    </el-form-item>
                    <el-form-item label="分类级别">
                        <el-select placeholder="请选择" style="width: 300px">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 100px;margin: 0px auto">
                        <el-button type="primary" @click="submitForm('form')">修改</el-button>
                        <el-button type="primary">立即添加</el-button>
                        <el-button @click="resetForm('form')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </template>
    </div>
</template>

<script>
    export default {
        name: "deletecommodity",
        data() {
            return {
                //弹框属性
                dialogFormVisible: false,
                form: [{
                    //分类ID
                    ID: '',
                    //一级分类
                    classone: '',
                    //二级分类
                    classtwe: '',
                    //三级分类
                    classthree: ''
                }],
                //下拉框绑定
                options: [{
                    //一级分类
                    classone: '',
                    //二级分类
                    classtwe: '',
                    //三级分类
                    classthree: ''
                }],
                value: '',
                formLabelWidth: '120px',
                dialogVisible: false,
            }
        }
        ,
        methods: {
            //重置方法
            resetForm(options) {
                this.$refs[options].resetFields();
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            }
        }
    }
</script>

<style scoped>

</style>